<template>
    <div>
        <h1>消费订单列表</h1>
        <h2>联合创始人</h2>
        <Form ref="formDynamic" :model="formDynamic" :label-width="80" style="width: 400px">
            <FormItem
                v-for="(item, index) in formDynamic.items"
                v-if="item.status"
                :key="index"
                :label="'服务 '"
                :prop="'items.' + index + '.value'"
                :rules="{required: true, message: 'Item ' + item.index +' can not be empty', trigger: 'blur'}">
                <Row>
                    <Col span="16">
                        <Input v-model="item.value">
                            <Select
                                v-model="item.type" slot="prepend" style="width: 120px"
                                filterable>
                                <Option v-for="option in server" :value="option.value" :key="option.value">{{option.label}}</Option> 
                            </Select>                               
                        </Input>
                    </Col>
                    <Col span="6" offset="2">
                        <Button type="ghost" @click="handleRemove(index)">删除</Button>
                    </Col>
                </Row>
            </FormItem>
            <FormItem>
                <Row>
                    <Col span="12">
                        <Button type="dashed" long @click="handleAdd" icon="plus-round">添加服务</Button>
                    </Col>
                </Row>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="handleSubmit('formDynamic')">确定</Button>
                <Button type="ghost" @click="handleReset('formDynamic')" style="margin-left: 8px">重置</Button>
            </FormItem>
        </Form>
        <h2>执行董事</h2>
        <Form ref="formDynamic1" :model="formDynamic1" :label-width="80" style="width: 400px">
            <FormItem
                v-for="(item, index) in formDynamic1.items"
                v-if="item.status"
                :key="index"
                :label="'服务 '"
                :prop="'items.' + index + '.value'"
                :rules="{required: true, message: 'Item ' + item.index +' can not be empty', trigger: 'blur'}">
                <Row>
                    <Col span="16">
                        <Input v-model="item.value">
                            <Select
                                v-model="item.type" slot="prepend" style="width: 120px"
                                filterable>
                                <Option v-for="option in server" :value="option.value" :key="option.value">{{option.label}}</Option> 
                            </Select>                               
                        </Input>
                    </Col>
                    <Col span="6" offset="2">
                        <Button type="ghost" @click="handleRemove1(index)">删除</Button>
                    </Col>
                </Row>
            </FormItem>
            <FormItem>
                <Row>
                    <Col span="12">
                        <Button type="dashed" long @click="handleAdd1" icon="plus-round">添加服务</Button>
                    </Col>
                </Row>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="handleSubmit1('formDynamic1')">确定</Button>
                <Button type="ghost" @click="handleReset1('formDynamic1')" style="margin-left: 8px">重置</Button>
            </FormItem>
        </Form>
        <h2>合伙人</h2> 
        <Form ref="formDynamic2" :model="formDynamic2" :label-width="80" style="width: 400px">
            <FormItem
                v-for="(item, index) in formDynamic2.items"
                v-if="item.status"
                :key="index"
                :label="'服务 '"
                :prop="'items.' + index + '.value'"
                :rules="{required: true, message: 'Item ' + item.index +' can not be empty', trigger: 'blur'}">
                <Row>
                    <Col span="16">
                        <Input v-model="item.value">
                            <Select
                                v-model="item.type" slot="prepend" style="width: 120px"
                                filterable>
                                <Option v-for="option in server" :value="option.value" :key="option.value">{{option.label}}</Option> 
                            </Select>                               
                        </Input>
                    </Col>
                    <Col span="6" offset="2">
                        <Button type="ghost" @click="handleRemove2(index)">删除</Button>
                    </Col>
                </Row>
            </FormItem>
            <FormItem>
                <Row>
                    <Col span="12">
                        <Button type="dashed" long @click="handleAdd2" icon="plus-round">添加服务</Button>
                    </Col>
                </Row>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="handleSubmit2('formDynamic2')">确定</Button>
                <Button type="ghost" @click="handleReset2('formDynamic2')" style="margin-left: 8px">重置</Button>
            </FormItem>
        </Form>
        <h2>钻石代理</h2> 
        <Form ref="formDynamic3" :model="formDynamic3" :label-width="80" style="width: 400px">
            <FormItem
                v-for="(item, index) in formDynamic3.items"
                v-if="item.status"
                :key="index"
                :label="'服务 '"
                :prop="'items.' + index + '.value'"
                :rules="{required: true, message: 'Item ' + item.index +' can not be empty', trigger: 'blur'}">
                <Row>
                    <Col span="16">
                        <Input v-model="item.value">
                            <Select
                                v-model="item.type" slot="prepend" style="width: 120px"
                                filterable>
                                <Option v-for="option in server" :value="option.value" :key="option.value">{{option.label}}</Option> 
                            </Select>                               
                        </Input>
                    </Col>
                    <Col span="6" offset="2">
                        <Button type="ghost" @click="handleRemove3(index)">删除</Button>
                    </Col>
                </Row>
            </FormItem>
            <FormItem>
                <Row>
                    <Col span="12">
                        <Button type="dashed" long @click="handleAdd3" icon="plus-round">添加服务</Button>
                    </Col>
                </Row>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="handleSubmit3('formDynamic3')">确定</Button>
                <Button type="ghost" @click="handleReset3('formDynamic3')" style="margin-left: 8px">重置</Button>
            </FormItem>
        </Form>
    </div>
</template>
<script>
export default {
    data() {
        return {           
            server:[],
            index: 0,
            formDynamic: {
                items: [

                ]
            },
            index1: 0,
            formDynamic1: {
                items: [
                    
                ]
            },
            index2: 0,
            formDynamic2: {
                items: [
                    
                ]
            },
            index3: 0,
            formDynamic3: {
                items: [
                    
                ]
            }
        };
    },
    mounted() { 
        let mid = localStorage.getItem("mid");
        if (mid == 'undefined' || mid == ''){
            alert("您还没有登陆");
            this.$router.push("admin");
            return;
        }
        if (mid.indexOf('3') < 0){
            alert("您没有权限");
            return;
        }
        this.addOption();        
    },
    methods: {
        getGivenService(){
            let qs = require('qs');
            this.axios({
                method: "post",
                url: `${this.adminUrl}/getNewGiven`,
                data: qs.stringify({})
                }).then(response => {
                    if ((response.data.result == 200)) {                                           
                        let data = response.data.data;
                        for (let i = 0; i < data.length; i++) {
                            switch(data[i].level.toString()){
                                case '1':            
                                    this.index++;                            
                                    this.formDynamic.items.push({
                                        value: data[i].num,
                                        index: this.index,
                                        status: 1,
                                        type: parseInt(data[i].sid)
                                    });                                  
                                break;
                                case '2':
                                    this.index1++;                               
                                    this.formDynamic1.items.push({
                                        value: data[i].num,
                                        index: this.index1,
                                        status: 1,
                                        type: parseInt(data[i].sid)
                                    });
                                break;
                                case '3':
                                    this.index2++;                               
                                    this.formDynamic2.items.push({
                                        value: data[i].num,
                                        index: this.index2,
                                        status: 1,
                                        type: parseInt(data[i].sid)
                                    });
                                break;
                                case '4':
                                    this.index3++;                               
                                    this.formDynamic3.items.push({
                                        value: data[i].num,
                                        index: this.index3,
                                        status: 1,
                                        type: parseInt(data[i].sid)
                                    });
                                break;
                            }
                        }
                        //alert(JSON.stringify(this.formDynamic.items) + " " + JSON.stringify(this.formDynamic1.items) + " " + JSON.stringify(this.formDynamic2.items));
                    }else{
                        alert("请求失败");
                    }
                }).catch(err =>{
                    console.log(err);
            }); 
        },
        updateItem(p){
            let qs = require('qs');
            this.axios({
                method: "post",
                url: `${this.adminUrl}/updateNewGiven`,
                data: qs.stringify({p:p})
                }).then(response => {
                    if ((response.data.result == 200)) {                                                
                        alert("上传成功！！");
                    }else{
                        alert("请求失败！！");
                    }
                }).catch(err =>{
                    console.log(err);
            }); 
        },
        handleSubmit(formDynamic){
            let p =  [];
            for (let i = 0; i < this.formDynamic.items.length; i++) {
                if (this.formDynamic.items[i].status == 1)
                p.push({sid:this.formDynamic.items[i].type, num:this.formDynamic.items[i].value, level:1});
            }       
            if (p.length == 0) {
                p.push({level:1});
                this.updateItem(p);
            }                                
            this.$refs[formDynamic].validate((valid) => {
                if (valid) {                   
                    this.updateItem(p);
                    this.$Message.success('Success!');
                } else {
                    this.$Message.error('Fail!');
                }
            })
        },
        handleReset(formDynamic){
            for(let i = 0; i < this.formDynamic.items.length; i++) {
                this.formDynamic.items[i].status = 0;
            }
        },
        handleRemove(index){
            this.formDynamic.items[index].status = 0;
        },
        handleAdd(){
            this.index++;
            this.formDynamic.items.push({
                value: '',
                index: this.index,
                status: 1,
                type: this.server[0].value
            });
        },
        handleSubmit1(formDynamic){
            let p =  [];
            for (let i = 0; i < this.formDynamic1.items.length; i++) {
                if (this.formDynamic1.items[i].status == 1)
                p.push({sid:this.formDynamic1.items[i].type, num:this.formDynamic1.items[i].value, level:2});
            }       
            if (p.length == 0) {
                p.push({level:2});
                this.updateItem(p);
            } 
            this.$refs[formDynamic].validate((valid) => {
                if (valid) {
                    this.updateItem(p);
                    this.$Message.success('Success!');
                } else {
                    this.$Message.error('Fail!');
                }
            })
        },
        handleReset1(formDynamic){
            for(let i = 0; i < this.formDynamic1.items.length; i++) {
                this.formDynamic1.items[i].status = 0;
            }
        },
        handleRemove1(index){
            this.formDynamic1.items[index].status = 0;
        },
        handleAdd1(){
            this.index1++;
            this.formDynamic1.items.push({
                value: '',
                index: this.index1,
                status: 1,
                type: this.server[0].value
            });
        },
        handleSubmit2(formDynamic){
            let p =  [];
            for (let i = 0; i < this.formDynamic2.items.length; i++) {
                if (this.formDynamic2.items[i].status == 1)
                p.push({sid:this.formDynamic2.items[i].type, num:this.formDynamic2.items[i].value, level:3});
            }    
            if (p.length == 0) {
                p.push({level:3});
                this.updateItem(p);
            } 
            this.$refs[formDynamic].validate((valid) => {
                if (valid) {                    
                    this.updateItem(p);
                    this.$Message.success('Success!');
                } else {
                    this.$Message.error('Fail!');
                }
            })
        },
        handleReset2(formDynamic){
            for(let i = 0; i < this.formDynamic2.items.length; i++) {
                this.formDynamic2.items[i].status = 0;
            }
        },
        handleRemove2(index){
            this.formDynamic2.items[index].status = 0;
        },
        handleAdd2(){
            this.index2++;
            this.formDynamic2.items.push({
                value: '',
                index: this.index2,
                status: 1,
                type: this.server[0].value
            });
        },
        handleSubmit3(formDynamic){
            let p =  [];
            for (let i = 0; i < this.formDynamic3.items.length; i++) {
                if (this.formDynamic3.items[i].status == 1)
                p.push({sid:this.formDynamic3.items[i].type, num:this.formDynamic3.items[i].value, level:4});
            }    
            if (p.length == 0) {
                p.push({level:4});
                this.updateItem(p);
            } 
            this.$refs[formDynamic].validate((valid) => {
                if (valid) {                    
                    this.updateItem(p);
                    this.$Message.success('Success!');
                } else {
                    this.$Message.error('Fail!');
                }
            })
        },
        handleReset3(formDynamic){
            for(let i = 0; i < this.formDynamic3.items.length; i++) {
                this.formDynamic3.items[i].status = 0;
            }
        },
        handleRemove3(index){
            this.formDynamic3.items[index].status = 0;
        },
        handleAdd3(){
            this.index3++;
            this.formDynamic3.items.push({
                value: '',
                index: this.index3,
                status: 1,
                type: this.server[0].value
            });
        },
        addOption(){
            let qs = require('qs');
            this.axios({
                method: "post",
                url: `${this.adminUrl}/getAllService`,
                data: qs.stringify({})
                }).then(response => {
                    if ((response.data.result == 200)) {
                        let length = response.data.data.length;
                        let harray = [];
                        for (let i = 0; i < length; i++){
                            harray.push(
                                {value:response.data.data[i].id, label:response.data.data[i].name}
                            );
                        }
                        this.server = harray;
                        this.select = harray[0].value;
                        this.getGivenService();
                    }else{
                        alert("请求失败");
                    }
                }).catch(err =>{
                    console.log(err);
            });
        }
    }
};
</script>